<template>
	<view class="teamInfo">
		<scroll-view lower-threshold="500" scroll-y="true" :style="{height:InfoHeight+'px'}">
			<view class="teamInfoScroll">
				<image class="Info_image" :src="teamInfo.logo" mode=""></image>
				<view class="team_t">
					<view class="team_name">
						{{teamInfo.name}}
					</view>
					<view class="box d-jc-sb d-ai-c t_name">
						<view class="box d-jc-sb d-ai-c" v-show="userInfo.userInfo.userId===teamInfo.userId?false:true">
							<image class="team_image1" :src="teamInfo.userLogo" mode=""></image>
							<view class="team_role">
								{{teamInfo.userName}}(团长)
							</view>
						</view>
						<view class="team_num">
							进团人数：{{teamInfo.applyNumber}}人
						</view>
					</view>
				</view>
				<view class="teamIntrouce">
					<view class="Introuce_t">
						<view class="">
							团队介绍
						</view>
					</view>
					<view class="Introuce_content">
						<view id="bg" ref='bg' class=" " :class="showMore?'more':'text-heide-2'">
							{{teamInfo.introduce==null?'暂无简介':teamInfo.introduce}}
							<view class="switch-arrow" :class="showMore?'iconfont iconshang shang':'iconfont iconxia xia'" v-show="show" @tap="showMore1"></view>
						</view>
						
					</view>
				</view>
				<view class="teamIntrouce" v-show="userInfo.userInfo.userId===teamInfo.userId?true:false">
					<view class="Introuce_t box d-jc-sb d-ai-c">
						<view class="">
							成员管理
						</view>
						<view class="box d-jc-sb d-ai-c" @tap="Members">
							<view class="allactivity">
								查看全部
							</view>
							<view class="iconfont iconqianjin right">
							</view>
						</view>
					</view>
					<view class="">
						<view class="memberNull" v-if="teamMember.length==0">
							暂无成员
						</view>
						<view class="ManageP box d-jc-sb d-ai-c" v-if="teamMember.length!==0" v-for="(item,index) in teamMember" :key="index">
							<view class="box d-jc-sb d-ai-c">
								<image class="team_image4" :src="item.image" mode=""></image>
								<view class="userInfo">
									<view class="">
										{{item.nickName}}
									</view>
									<view class="">
										{{item.phone}}
									</view>
								</view>
							</view>
							<view class="jointime">
								进团时间：{{item.entryTime}}
							</view>
						</view>
					</view>
				</view>
				<!-- 非团长身份关联活动 -->
				<view class="teamIntrouce1" v-show="userInfo.userInfo.userId===teamInfo.userId?false:true">
					<view class="Introuce_t box d-jc-sb d-ai-c">
						<view class="">
							团队参加活动
						</view>
					</view>
					<view class="">
						<view class="memberNull" v-if="Ujoinactivity.length==0">
							暂无活动
						</view>
						<view class="Introuce_content box d-jc-sb" v-if="Tjoinactivity.length!==0" v-for="(item,index) in Ujoinactivity" :key="index">
							<view class="">
								<image class="team_image3" :src="item.logo" mode=""></image>
							</view>
							<view class="c_b">
								<view class="">
									{{item.title}}
								</view>
								<view class="c_t">
									<view class="">
										{{item.startTime}} 到 {{item.endTime }}
									</view>
									<view class="">
										{{item.city}}{{item.district}}{{item.address}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 团长身份关联活动 -->
				<view class="teamIntrouce" v-show="userInfo.userInfo.userId===teamInfo.userId?true:false">
					<view class="Introuce_t box d-jc-sb d-ai-c">
						<view class="">
							活动管理
						</view>
						<view class="box d-jc-sb d-ai-c" @tap="EventsM">
							<view class="allactivity">
								查看全部
							</view>
							<view class="iconfont iconqianjin right">
							</view>
						</view>
					</view>
					<view class="">
						<view class="memberNull" v-if="Tjoinactivity.length==0">
							暂无活动
						</view>
						<view class="Introuce_content box d-jc-sb" v-if="Ujoinactivity.length!==0" v-for="(item,index) in Tjoinactivity" :key="index">
							<view class="">
								<image class="team_image3" :src="item.logo" mode=""></image>
							</view>
							<view class="c_b">
								<view class="">
									{{item.title}}
								</view>
								<view class="c_t">
									<view class="">
										{{item.applyStartTime}}到{{item.applyEndTime}}
									</view>
									<view class="">
										{{item.city}}{{item.district}}{{item.address}}
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				
			</view>
		</scroll-view>
		<view class="teambottom" v-show="userInfo.userInfo.userId===teamInfo.userId?false:true">
			<view class="t_b box d-jc-sb d-ai-c">
				<view class="b_left" @tap="call">
					<image src="../../static/images/user/dh@2x.png" mode=""></image>
					<view class="">
						电话咨询
					</view>
				</view>
				<view class="joinTeam" v-if="teamInfo.applyFlag===null" @tap='handleApply(teamInfo.applyFlag)'>
					加入此团队
				</view>
				<view class="joinTeam1" v-if="teamInfo.applyFlag===1">
					等待审核
				</view>
				<view class="joinTeam" v-if="teamInfo.applyFlag===0">
					已加入
				</view>
				<view class="joinTeam" v-if="teamInfo.applyFlag===2" @tap='handleApply(teamInfo.applyFlag)'>
					重新加入
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<bestPaymentPassword :forget=false ref="paymentPassword" mode=1 digits="6" @submit="checkPwd">
		</bestPaymentPassword>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import bestPaymentPassword from '../../components/sanshui-payment-password/index.vue'
	export default {
		computed: mapState(['loginState', 'userInfo']),
		components: {
			bestPaymentPassword
		},
		data() {
			return {
				InfoHeight: '',
				showMore: false,
				hasMoreArrow: true,
				teamInfo: '',
				teamid: '',
				teamMember: '',
				Tjoinactivity: '',
				Ujoinactivity: '',
				show:true,
				type:''
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.InfoHeight = res.windowHeight - uni.upx2px(0) //windoHeight为窗口高度，主要使用的是这个	
				}
			})

		},
		mounted() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('#bg').boundingClientRect(data => {
					console.log(data)
					console.log("==============" + data.height)

					if (data.height >= 35) {
						console.log(this.$refs.bg.$el)
						this.hasMoreArrow = true
						this.showMore = false
						// this.$refs.bg.$el.style.overflow = 'hidden'

						// this.$refs.bg.$el.style.textOverflow = 'ellipsis'

						// this.$refs.bg.$el.style.display = '-webkit-box'
					} else {
						this.hasMoreArrow = false
						console.log(data.height)
					}
				}).exec();
			}, 200)
		},
		onLoad(option) {
			this.TeamInfo(option.id,option.type)
			this.teamid = option.id
			this.type = option.type
			this.memberlist()
			this.joinedactivity(option.id)
		},
		onShow() {
			let carData = ''
			uni.$on("carData", (rel) => {
				carData = rel
				console.log(rel)
				if (carData == 1) {
					this.TeamInfo(this.teamid,this.type)
				
				} 
			})
		},
		methods: {
			handleApply(data) {
				if (data == null) {
					//未报名
					this.$refs.paymentPassword.modalFun('show');
					this.unityId = this.teamInfo.id
				}
			
			
			},
			//校验密码
			checkPwd(e) {
				this.$api.applyUnity({
					unityId: this.unityId,
					password: e.value,
					type:1
				}).then((res) => {
					if (res.data.success) {
						uni.showToast({
							title: "报名成功，等待审核！",
							duration: 2000,
							icon: 'none',
						});
						this.TeamInfo(this.teamid,this.type)
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: 'none',
						});
					}
			
				})
			
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.teamInfo.phone //仅为示例
				});
			},
			//团队详情
			TeamInfo(id,type) {
				this.$api.TeamInfo({
					id: id,
					type: type
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.teamInfo = res.data.dataMap
						if (this.teamInfo.practicalNumber == null) {
							this.teamInfo.practicalNumber = 0
						}
					}
				})
			},
			//活动管理
			EventsM() {
				uni.navigateTo({
					url: './EventManage?teamid='+this.teamid,
					animationDuration: 300
				})
			},
			//成员管理
			Members(teamid) {
				uni.navigateTo({
					url: './Member?teamid=' + this.teamid,
					animationDuration: 300
				})
			},
			//成员列表
			memberlist() {
				this.$api.memberlist({
					unityId: this.teamid,
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						var array = res.data.dataMap
						this.teamMember = array.slice(0,2)
						console.log(this.teamMember)
					}
				})
			},
			//关联活动
			joinedactivity(id) {
				this.$api.joinedactivity({
					activityUnityId: id,
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						var Tarray = res.data.dataMap
						this.Ujoinactivity = res.data.dataMap
						this.Tjoinactivity = Tarray.slice(0,2)
						console.log(this.Tjoinactivity)
					}
				})
			},
			showMore1() {
				console.log(this.$refs.bg)
				console.log(this.showMore)
				if (this.showMore === true) {
					// this.$refs.bg.$el.style.overflow = 'hidden'	
					// this.$refs.bg.$el.style.textOverflow = 'ellipsis'
					// this.$refs.bg.$el.style.display = '-webkit-box'
					this.showMore = false

				} else {
					// this.$refs.bg.$el.display='block';
					// this.$refs.bg.$el.textOverflow='initial';
					// this.$refs.bg.$el.style.overflow = ''
					// this.$refs.bg.$el.style.textOverflow = ''
					// this.$refs.bg.$el.style.display = ''
					this.showMore = true
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.right{
		font-size: 24rpx;
		color: #999999;
		margin-top: 5rpx;
	}
	.allactivity{
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		line-height: 36rpx;
		margin-right: 5rpx;
	}
	.memberNull{
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
	.userInfo>view:nth-child(1) {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.userInfo>view:nth-child(2) {
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
	}

	.jointime {
		font-size: 26rpx;
		font-weight: 500;
		color: #999999;
	}

	.team_image4 {
		width: 80rpx;
		height: 79rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.ManageP {
		width: 630rpx;
		height: 100rpx;
		// border:1rpx solid red;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.joinTeam {
		width: 480rpx;
		height: 80rpx;
		background: #FF5551;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

	}
	.joinTeam1 {
		width: 480rpx;
		height: 80rpx;
		background: #999;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	
	}
	.b_left {
		height: 80rpx;
		text-align: center;
		line-height: 20rpx;
		margin-left: 50rpx;
	}

	.b_left>image {
		width: 48rpx;
		height: 48rpx;
	}

	.b_left>view {
		font-size: 24rpx;
		font-weight: 500;
		color: #FF7E51;
	}

	.t_b {
		width: 690rpx;
		height: 100%;
		margin: 0 auto;
	}

	.teambottom {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
	}

	.c_b>view:nth-child(1) {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
	}

	.c_t {
		position: absolute;
		bottom: -110rpx;
	}

	.c_t>view:nth-child(1) {
		width: 380rpx;
		font-size: 22rpx;
		font-weight: 500;
		line-height: 30rpx;
		color: #999999;
	}

	.c_t>view:nth-child(2) {
		width: 380rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.c_b {
		width: 358rpx;
		height: 60rpx;
		position: relative;
	}

	.team_image3 {
		width: 250rpx;
		height: 164rpx;
		border-radius: 8rpx;
	}

	.teamInfo {
		width: 750rpx;
		background: #F8F8F8;
	}

	.teamInfoScroll {
		overflow: hidden;
	}

	.Info_image {
		width: 750rpx;
		height: 400rpx;
	}

	.team_t {
		width: 690rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 36rpx;
		overflow: hidden;
	}

	.team_name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.team_image1 {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
	}

	.t_name {
		width: 630rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.team_role {
		margin-left: 15rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.team_num {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}

	.teamIntrouce {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		overflow: hidden;
		padding-bottom: 30rpx;
	}
	.teamIntrouce1 {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		overflow: hidden;
		padding-bottom: 120rpx;
	}
	.Introuce_t {
		width: 630rpx;
		height: 75rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #EEEEEE;
	}

	.Introuce_t>view:nth-child(1) {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		line-height: 75rpx;
	}

	.Introshow>view {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		line-height: 36rpx;
	}

	.Introshow>text {
		font-size: 24rpx;
		margin-left: 5rpx;
	}

	.Introuce_content {
		width: 630rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		position: relative;
	}
	.switch-arrow {
		position: absolute;
		right: -6px;
		bottom: -10px;
		color: #000;
		border: 6px solid transparent;
		border-left-width: 24px;
		border-right-width: 0;
		border-color: transparent;
		}
	.ellipsis {
		line-height: 38rpx;
		position: relative;
		padding-right: 3px;
		// overflow:hidden; 
		// word-break: break-all;
		// text-overflow:ellipsis;
		// display:-webkit-box; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

		.switch-arrow {
			position: absolute;
			right: -6px;
			bottom: -13px;
			color: #000;
			border: 6px solid transparent;
			border-left-width: 24px;
			border-right-width: 0;
			border-color: transparent;

			&:before {
				background-color: #fff;
			}
		}

	}

	more {
		display: block;
		text-overflow: initial;
	}
</style>
